<template>
  <div>
    <el-table
      :cell-style="tablestyle"
      :header-cell-style="tablestyle"
      :data="viewData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="42">
      </el-table-column>
      <el-table-column
        label="用例ID"
        width="65"
        show-overflow-tooltip
        type="index">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="用例名称"
        width="150"
        prop="exampleName">
        <template slot-scope="scope">
          <span @click="checkDetails(scope.row)">{{ scope.row.exampleName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        prop="founderName">
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="200"
        prop="createTime">
      </el-table-column>
      <el-table-column
        label="关联缺陷数"
        prop="bugNumber">
      </el-table-column>
      <el-table-column
        label="执行状态"
        prop="exampleStatus">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="220"
      >
        <template slot-scope="scope">
          <span @click="addAttachments(scope.row)">
            <el-link type="primary" :underline="false" style="color: #20a0ff">添加附件</el-link>
          </span>
          <span @click="executionUseCase(scope.row)">
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" style="color: #20a0ff">执行用例</el-link>
          </span>
          <span @click="deleteExample(scope.row)">
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" style="color: #f34d37">删除</el-link>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        prev-text="上一页"
        next-text="下一页"
        :page-sizes="[5, 7, 10, 15]"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <!--  删除弹出框  -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      width="30%">
      <span>
        <el-result icon="warning" title="警告,删除之后无法撤销！是否继续">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogSureDelete">确认</el-button>
            <el-button size="medium" @click="deleteDialogVisible = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>

    <!-- 执行用例的弹出框 -->
    <el-dialog
      :visible.sync="useCaseDialogVisible"
      title="执行测试用例"
      width="60%">
      <el-form>
        <el-form-item label="执行状态：">
          <el-select size="small" v-model="exampleInfo.exampleStatus">
            <el-option value="通过" label="通过"></el-option>
            <el-option value="未通过" label="未通过"></el-option>
            <el-option value="阻塞" label="阻塞"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin-top: 5px">
        <el-table
          :data="stepTableData"
          style="width: 100%">
          <el-table-column
            prop="stepName"
            label="步骤"
            width="180">
           </el-table-column>
          <el-table-column
            prop="stepData"
            label="数据"
            width="180">
          </el-table-column>
          <el-table-column
            prop="expectedOutcome"
            label="预期结果">
          </el-table-column>
          <el-table-column
            label="实际结果">
            <template slot-scope="scope">
              <el-input v-model="scope.row.actualOutcome"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="useCaseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateActualOutcome()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加附件弹窗 -->
    <el-dialog
      :visible.sync="addFileDialogVisible"
      title="添加附件"
      width="60%">
      <div>
        <el-upload
          class="upload-demo"
          action="http://localhost:8084/example-file/uploadExampleFile"
          multiple
          :data="{'exampleId':exampleInfo.id}"
          :limit="3"
          :on-success="uploadSuccess"
          :show-file-list=false
          :file-list="fileList">
          <el-button class="proButton" size="small">上传文档</el-button>
        </el-upload>
      </div>
      <el-table
          :data="fileTableData"
          style="width: 100%">
          <el-table-column
            prop="fileName"
            label="附件名称">
           </el-table-column>
          <el-table-column
            prop="createTime"
            label="上传日期">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <span @click="uploadFile(scope.row)">
                <el-link type="primary" :underline="false" style="color: #20a0ff">下载</el-link>
              </span>
              <span @click="deleteFileOnly(scope.row)">
                <el-divider direction="vertical"></el-divider>
                <el-link type="primary" :underline="false" style="color: #f34d37">删除</el-link>
              </span>
            </template>
          </el-table-column>
        </el-table>
    </el-dialog>
    <!--  删除文件弹出框  -->
    <el-dialog
      :visible.sync="deleteFileDialogVisible"
      width="30%">
      <span>
        <el-result icon="warning" title="警告,删除之后无法恢复！是否继续">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogSureDeleteFile">确认</el-button>
            <el-button size="medium" @click="deleteFileDialogVisible = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatTime } from '@/utils/validate'
import { getExamples, deleteExample, getSteps, renewStepActualOutcome } from '@/api/example'
import { getExampleFile, deleteExampleFile } from '@/api/example-file'

export default {
  name: 'exampleTable',
  data(){
    return{
      //用例表格
      pagesize: 7,        //分页每一页的数目
      currentPage: 1,     //标记当前的在第几页
      viewData:[],
      total: 0,
      //删除用例
      deleteDialogVisible: false,        //删除警告弹出框是否显示的值
      deleteSureExampleId: '',           //删除用例绑定那一行的用例的id
      selectExample: [],                 //多选时row值暂存在此中 
      //执行用例
      useCaseDialogVisible: false,        //执行用例弹窗是否显示的值
      stepTableData: [],                 //执行用例弹窗的表格数据
      exampleInfo:{} ,                   //当前选择的用例信息
      //添加附件
      addFileDialogVisible: false,        //添加附件的弹窗
      deleteFileDialogVisible: false,    //删除时的确认弹框
      fileList: [],                      //文件列表
      fileTableData: [],                 //文件表格数据
      fileId: '',                        //要删除的文件id
    }  
  },
  computed:{
    ...mapGetters(['projectId','userInfo'])
  },
  methods:{
    //查看项目详情
    checkDetails(row){
      this.$parent.drawerExampleInformationChange(row)
    },
    //点击添加附件的方法
    addAttachments(row){
      this.exampleInfo = row
      this.getFilesInfo(row.id)
      this.addFileDialogVisible = true
    },
    //点击执行用例的方法
    executionUseCase(row){
      this.exampleInfo = row
      this.getExampleStepByExampleId(row.id)
      this.useCaseDialogVisible = true
    },
    //点击删除的方法
    deleteExample(row){
      this.deleteDialogVisible = true
      this.deleteSureExampleId = row.id
      console.log(this.deleteSureExampleId);
    },
    //确认删除的方法
    dialogSureDelete(){
      deleteExample({id:this.deleteSureExampleId}).then(res =>{
        this.deleteDialogVisible = false
        this.$message({type: 'success',message: res.msg})
        this.getExamples()
      })
    },
    //修改每页数量多少时调用
    handleSizeChange(val){
      this.pagesize = val
      this.getExamples()
    },
    //分页条改变时调用的方法
    handleCurrentChange(val) {
      this.currentPage = val
      this.getExamples()
    },
    //居中样式的返回方法
    tablestyle(){
      return "text-align:center;"
    },
    //表格多选时值改变的方法
    handleSelectionChange(val){
      this.selectExample = val
    },
    //获取表格数据
    getExamples(){
      let params = {"current":this.currentPage,"size":this.pagesize}
      getExamples(params,this.projectId).then(res =>{
        for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].createTime = formatTime(res.data.records[i].createTime)
          }
          this.viewData = res.data.records
          this.total = res.data.total
      })
    },
    //通过用例id查询用例步骤
    getExampleStepByExampleId(id){
      getSteps({exampleId:id}).then(res =>{
        this.stepTableData = res.data
      })
    },
    //用例步骤更新实际结果的方法
    updateActualOutcome(){
      let params = {exampleSteps:this.stepTableData,exampleId:this.exampleInfo.id,exampleStatus:this.exampleInfo.exampleStatus,userId:this.userInfo.id}
      renewStepActualOutcome(params).then(res =>{
        this.$message({type: 'success', message: res.msg})
        this.useCaseDialogVisible = false
      })
    },

    //单个删除文件
    deleteFileOnly(row){
      this.fileId = row.id
      this.deleteFileDialogVisible = true
    },
    //确定删除文件后的执行方法
    dialogSureDeleteFile(){
      deleteExampleFile({'id':this.fileId}).then(res =>{
        this.$message({type: 'success',message: res.msg})
        this.deleteFileDialogVisible = false
        this.getFilesInfo(this.exampleInfo.id)
      })
    },
    //下载附件
    uploadFile(file){
      window.open(file.fileAccessPath,'_blank')
    },
    //文件上传成功
    uploadSuccess(){
      this.getFilesInfo(this.exampleInfo.id)
      this.$message({type: 'success',message:'上传成功'})
    },
    //获取附件信息
    getFilesInfo(id){
      getExampleFile({'id':id}).then(res =>{
        for(let i = 0; i < res.data.length; i++){
          res.data[i].createTime = formatTime(res.data[i].createTime)
        }
        this.fileTableData = res.data
      })
    },
  },
  mounted(){
    this.getExamples()
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  margin-right: 10px;
  text-align: right;
  ::v-deep .el-pagination__jump {
    float: left;
  };
  ::v-deep .el-pagination__total {
    float: left;
  };
  ::v-deep .el-pagination__sizes {
    float: left;
  }
}
</style>
